<template>
  <div class="flow-connection">
    <!-- 连接线容器（相对定位） -->
    <div class="line-container" :style="containerStyle" @click="handleClick">
      <div :class="['connection-line', edge.type]">
        <div class="line-path" :style="lineStyle"></div>
      </div>
    </div>
    
    <!-- 连接点（绝对定位，直接使用全局坐标） -->
    <div class="connection-point start" :style="startPointStyle"></div>
    <div class="connection-point end" :style="endPointStyle"></div>
  </div>
</template>

<script>
import { computed } from 'vue';
import { CONNECTION_TYPES } from './constants';

export default {
  name: 'FlowConnection',
  props: {
    edge: {
      type: Object,
      required: true,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    // 连接线容器样式（绝对定位，直接使用起点坐标）
    const containerStyle = computed(() => ({
      position: 'absolute',
      left: `${props.edge.startX}px`,
      top: `${props.edge.startY}px`,
      pointerEvents: 'auto',
    }));
    
    // 计算连接线的样式（长度和角度）
    const lineStyle = computed(() => {
      const config = CONNECTION_TYPES[props.edge.type] || CONNECTION_TYPES.serial;
      
      // 计算连接线的长度
      const deltaX = props.edge.endX - props.edge.startX;
      const deltaY = props.edge.endY - props.edge.startY;
      const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
      
      // 计算连接线的角度
      const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
      
      return {
        width: `${length}px`,
        height: `${config.lineWidth}px`,
        backgroundColor: config.color,
        transform: `rotate(${angle}deg)`,
        transformOrigin: '0 50%',
      };
    });
    
    // 起点连接点样式（绝对定位，使用全局坐标）
    const startPointStyle = computed(() => {
      const config = CONNECTION_TYPES[props.edge.type] || CONNECTION_TYPES.serial;
      
      return {
        position: 'absolute',
        left: `${props.edge.startX}px`,
        top: `${props.edge.startY}px`,
        backgroundColor: config.color,
        zIndex: 10,
      };
    });
    
    // 终点连接点样式（绝对定位，使用全局坐标）
    const endPointStyle = computed(() => {
      const config = CONNECTION_TYPES[props.edge.type] || CONNECTION_TYPES.serial;
      
      return {
        position: 'absolute',
        left: `${props.edge.endX}px`,
        top: `${props.edge.endY}px`,
        backgroundColor: config.color,
        borderColor: config.color,
        zIndex: 10,
      };
    });
    
    const handleClick = (event) => {
      emit('click', { edge: props.edge, event });
    };
    
    return {
      containerStyle,
      lineStyle,
      startPointStyle,
      endPointStyle,
      handleClick,
    };
  },
};
</script>

<style scoped>
.flow-connection {
  pointer-events: none;
}

.line-container {
  cursor: pointer;
}

.connection-line {
  position: relative;
}

.line-path {
  transition: all 0.2s ease;
}

.line-container:hover .line-path {
  filter: brightness(1.2);
}

/* 连接点样式 */
.connection-point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* 起点：圆点（使用默认样式）*/

.connection-point.end {
  /* 终点：箭头效果 */
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 6px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  box-shadow: none;
}

.line-container:hover ~ .connection-point {
  transform: translate(-50%, -50%) scale(1.3);
}

/* 不同类型的连接线颜色在 constants.js 中定义 */
</style>

